<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script src="js/i5scroll.js"></script>
</head>
<body>
    <!--头部开始-->
    <div class="header wrap">
        <div class="logo left">
            <a href="index.html">
                <img src="images/logo.png" alt="">
                <div class="top_bt left">
                    <p>茶叶协会官网 </p>
                    <span>www.cha**ui.top</span>
                </div>
            </a>
        </div>
        <ul class="nav left">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li>
                <a href="关于我们.html">关于我们</a>
                <ul class="sub_menu">
                    <li><a href="关于我们.html">公司简介</a></li>
                    <li><a href="关于我们.html">荣誉资质</a></li>
                    <li><a href="关于我们.html">企业文化</a></li>
                    <li><a href="关于我们.html">联系我们</a></li>
                </ul>
            </li>
            <li>
                <a href="产品中心.html" class="active">产品中心</a>
                <ul class="sub_menu">
                    <li><a href="产品中心.html">乌龙茶系列</a></li>
                    <li><a href="产品中心.html">花茶系列</a></li>
                    <li><a href="产品中心.html">普洱系列</a></li>
                    <li><a href="产品中心.html">茶食品系列</a></li>
                    <li><a href="产品中心.html">茶月饼系列</a></li>
                    <li><a href="产品中心.html">茶具系列</a></li>
                </ul>
            </li>
            <li>
                <a href="新闻列表.html">新闻动态</a>
                <ul class="sub_menu">
                    <li><a href="新闻列表.html">公司新闻</a></li>
                    <li><a href="新闻列表.html">行业动态</a></li>
                    <li><a href="新闻列表.html">媒体报告</a></li>
                    <li><a href="新闻列表.html">茶叶知识</a></li>
                </ul>
            </li>
            <li>
                <a href="#">品牌简介</a>
            </li>
            <li>
                <a href="合作交流.html">合作交流</a>
                <ul class="sub_menu">
                    <li><a href="合作交流.html">合作介绍</a></li>
                    <li><a href="合作交流.html">意向提交</a></li>
                    <li><a href="合作交流.html">成功案例</a></li>
                    <li><a href="合作交流.html">信息发布</a></li>
                </ul>
            </li>        
        </ul>
    </div>
    <!--头部结束-->
    
    <!--banner-->
    <div class="n_banner">
        <img src="./images/n_banner.jpg" alt="">
    </div>

    <div class="product">
        <div class="company">
            <div class="title_in">
                <ul class="company_title wrap">
                    <li class="active">乌龙茶系列</li>
                    <li>花茶系列</li>
                    <li>普洱系列</li>
                    <li>茶食品系列</li>
                    <li>茶月饼系列</li>
                    <li>茶具系列</li>
                </ul>
            </div>
            
            
            <div class="details_box wrap">
                <div class="title">
                    <h3>醇津</h3>
                    <span>发布时间: 2014-09-24 10:27   </span>
                    <p>醇津</p>
                </div>
                <div class="prt_box">
                    <div class="pic">
                        <div class="view">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="images/cp1.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp2.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp3.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp4.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp5.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
            
                        <div class="preview">
                            <a class="arrow-left" href="#"></a>
                            <a class="arrow-right" href="#"></a>
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide active-nav">
                                        <img src="images/cp1.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp2.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp3.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp4.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/cp5.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="xqnr">
                    <p>
                        当您寒冷时，茶会温暖你。当你失意时，茶会鼓励你。本品选用OC-1000铁观音品种之原料，配用现代化的制茶设备精心加工而成。成品颗粒紧结匀净，色泽砂绿青润，香气浓郁，滋味甘醇，享<br>
                        有“活、甘、清、香”四绝之称。<br>
                        适合90-95℃的水温，温壶后茶量3分满，第一泡60秒，后续每泡累加5-10秒，浓度可依个人喜好酌量增减冲泡时间。<br>
                        原产地：福建安溪<br>
                        质量等级：特级（清香）<br>
                        保存方法：密封、防潮、防异味、冷藏<br>
                        保质期：二年<br>
                        本品外包装以纸盒兼二两磨砂罐包装，内以8.3克小袋真空包装，使茶叶长久保存，又方便消费者携带冲泡。<br>
                        铁观音制作流程<br>
                        鲜叶采摘——室内外萎凋——发酵——杀青——揉捻——干燥——初制茶（毛茶）——精制加工——包装——成品<br>
                        冲泡按其程序可分为八道：<br>
                        1 白鹤沐浴 （洗 杯）：用开水洗净茶具<br>
                        2 观音入宫 （落 茶）：把铁观音茶放入茶具，放茶量约占茶具容量的五分；<br>
                    　　3 悬壶高冲 （冲 茶）：把滚开的水提高冲入茶壶或盖瓯，使茶叶转动；<br>
                    　　4 春风拂面 （刮泡沫）：用壶盖或瓯盖轻轻刮去漂浮的白泡沫，使其清新洁净；<br>
                    　　5 关公巡城 （倒 茶）：把泡一，二分钟后的茶水依次巡回注入并列的茶杯里；<br>
                    　　6 韩信点兵 （点 茶）：茶水倒到少许时要一点一点均匀地滴到各茶杯里；<br>
                    　　7 鉴尝汤色 （看 茶）：观尝杯中茶水的颜色<br>
                    　　8 品啜甘霖 （喝 茶）：乘热细缀，先闻其香，后尝其味，边啜边闻，浅斟细<br>
                    饮。饮量虽不多，但能齿颊 留香，喉底回甘，心旷神怡，别有情趣。 
                    </p>
                </div>
                
                <div class="paging">
                    <p>上一个：<a href="">紫色玫瑰花茶</a></p>
                    <p>下一个：<a href="">典藏大红袍佳品</a></p>
                </div>

            </div>
            
  
            
        </div>
    </div>

    <div class="footer">
        <div class="f_nav">
            <ul class="wrap">
                <li><a href="">网站首页</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">产品中心</a></li>
                <li><a href="">新闻动态</a></li>
                <li><a href="">品牌简介</a></li>
                <li><a href="">合作交流</a></li>
            </ul>
        </div>
        <div class="f_message wrap">
            <div class="m_box1 left">
                <h3>联系我们</h3>
                <p>地址：某某市友谊路258号（百灵·尚品一号B-2-8-2）</p>
                <p>邮编：5**0000　</p>
                <p>电话：400-***-000</p>
                <p>联系人：精品茶叶官方宣传网站</p>
            </div>
            <ul class="m_box2 left">
                <li>
                    <h3>关于我们</h3>
                    <a href="">关于我们</a>
                    <a href="">联系我们</a>
                    <a href="">企业文化</a>
                    <a href="">荣誉资质</a>
                </li>
                <li>
                    <h3>合作交流</h3>
                    <a href="">成功案例</a>
                    <a href="">合作介绍</a>
                    <a href="">信息发布</a>
                    <a href="">意向提交</a>
                </li>
                <li>
                    <h3>产品中心</h3>
                    <a href="">乌龙茶系列</a>
                    <a href="">花茶系列</a>
                    <a href="">普洱系列</a>
                    <a href="">茶食品系列</a>
                </li>
            </ul>
            <div class="rwm right">
                <img src="./images/erweima.png" alt="">
                <p>微信公众号</p>
            </div>
        </div>
        <div class="f_copyright">
            <p class="wrap">
                COPYRIGHT WWW.GZ**.ORG　版权所有：精品茶叶官方宣传网站       ICP备案编号：黔ICP备140***33号-1
            </p>
        </div>
    </div>



    <script>
        var viewSwiper = new Swiper('.view .swiper-container', {
          on:{
            slideChangeTransitionStart: function() {
                updateNavPosition()
              }
          }
        })
        
        $('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
          e.preventDefault()
          if (viewSwiper.activeIndex == 0) {
            viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
            return
          }
          viewSwiper.slidePrev()
        })
        $('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
          e.preventDefault()
          if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
            viewSwiper.slideTo(0, 1000);
            return
          }
          viewSwiper.slideNext()
        })
        
        var previewSwiper = new Swiper('.preview .swiper-container', {
          //visibilityFullFit: true,
          slidesPerView: 'auto',
          allowTouchMove: false,
          on:{
            tap: function() {
                viewSwiper.slideTo(previewSwiper.clickedIndex)
            }
          }
        })
        
        function updateNavPosition() {
            $('.preview .active-nav').removeClass('active-nav')
            var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
            if (!activeNav.hasClass('swiper-slide-visible')) {
              if (activeNav.index() > previewSwiper.activeIndex) {
                var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
              } else {
                previewSwiper.slideTo(activeNav.index())
              }
            }
          }
        </script>

</body>
</html>







